import React from 'react';
import { connect } from 'react-redux';
import SearchArea from 'components/search-area';
import { deepFullCopy, messages } from 'share/common';
import { Button, Message, Popover } from 'antd';
import ResizeTable from 'components/resize-table';
import ExportModal from 'components/template/export-modal/export-modal';
import Service from './laborerAndDriver.service';
import moment from 'moment'

class LabdrerAndDriver extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      searchForm: [{
        type: 'input',
        id: 'name',
        label: messages('mcd.basicData.laborerAndDriver.name'/* 姓名 */),
        showSearch: true
      }, {
        type: 'input',
        id: 'vendor',
        label: messages('mcd.basicData.laborerAndDriver.Vendor'/* Vendor编码 */),
        showSearch: true
      }, {
        type: 'select',
        id: 'type',
        label: messages('mcd.basicData.laborerAndDriver.type'/* 人员类型 */),
        options: [{
          value: '1',
          label: '司机'
        }, {
          value: '2',
          label: '劳务人员'
        }],
        showSearch: true
      }, {
        type: 'input',
        id: 'employeeName',
        label: messages('mcd.basicData.laborerAndDriver.employee_id'/* 秘书 */),
        showSearch: true
      }],
      data: [],
      columns: [{
        width: '16%',
        title: messages('common.sequence' /* 序号 */),
        key: 'order',
        dataIndex: 'order',
        render: text => text ? <Popover className="tableText" overlayStyle={{ maxWidth: 500 }} placement="topLeft" content={text}>{text}</Popover> : <span>-</span>
      }, {
        width: '16%',
        title: messages('mcd.basicData.laborerAndDriver.name' /* 姓名 */),
        key: 'name',
        dataIndex: 'name',
        render: text => text ? <Popover className="tableText" overlayStyle={{ maxWidth: 500 }} placement="topLeft" content={text}>{text}</Popover> : <span>-</span>
      }, {
        width: '16%',
        title: messages('mcd.basicData.laborerAndDriver.Vendor' /* Vendor编码 */),
        key: 'vendor',
        dataIndex: 'vendor',
        render: text => text ? <Popover className="tableText" overlayStyle={{ maxWidth: 500 }} placement="topLeft" content={text}>{text}</Popover> : <span>-</span>
      }, {
        width: '16%',
        title: messages('mcd.basicData.laborerAndDriver.type' /* 人员类型 */),
        key: 'type',
        dataIndex: 'type',
        render: (text) => {
          if (!text) {
            return <span>-</span>;
          }
          const showText = [1, '1'].includes(text) ? messages('mcd.basicData.laborerAndDriver.driv') : messages('mcd.basicData.laborerAndDriver.laborer');
          return <Popover className="tableText" overlayStyle={{ maxWidth: 500 }} placement="topLeft" content={showText}>{showText}</Popover>;
        }
      }, {
        width: '16%',
        title: messages('mcd.basicData.laborerAndDriver.employee_id' /* 秘书 */),
        key: 'employeeName',
        dataIndex: 'employeeName',
        render: text => text ? <Popover className="tableText" overlayStyle={{ maxWidth: 500 }} placement="topLeft" content={text}>{text}</Popover> : <span>-</span>
      }, {
        width: '16%',
        title: messages('my-agency.key5' /* 代理日期 */),
        key: 'startDate',
        dataIndex: 'startDate',
        render: (text, record, index) => text ? <Popover className="tableText" overlayStyle={{ maxWidth: 500 }} placement="topLeft" content={text}>{moment(record.startDate).format('YYYY-MM-DD')}至{record.endDate ? moment(record.endDate).format('YYYY-MM-DD') : '无限制'}</Popover> : <span>-</span>
      }],
      pagination: {
        pageSize: 10,
        current: 1,
        page: 0,
        total: 0,
        size: 10,
        showSizeChanger: true,
        showQuickJumper: true,
      },
      loading: false,
      searchCondition: { all: true } // true 没有筛选条件  false 有筛选条件
    };
  }

  componentDidMount() {
    this.getListData();
  }

  /**
   * 根据筛选条件和页码去查找劳务人员和司机数据
   * @param {Object} values
   */
  getListData = async (valuesParams = {}) => {
    const values = deepFullCopy(valuesParams);
    const { pagination } = this.state;
    let url = '';
    url = `?size=${pagination.size}&page=${pagination.page}`;
    for (const key in values) {
      if (values[key]) {
        url += `&${key}=${values[key]}`;
      } else if (!values[key]) {
        delete values[key];
      }
    }
    const res = await Service.getListData(url);

    const dataTemp = res.data.records.map((record, index) => {
      record.order = index + 1;
      return record;
    });
    const paginationTemp = Object.assign({}, pagination);
    paginationTemp.total = res.data.total;
    this.setState({
      data: dataTemp,
      pagination: paginationTemp,
      loading: false
    });

  }

  clearHandle = () => {
    const { pagination } = this.state;
    this.setState({
      loading: true,
      pagination: {
        pageSize: pagination.pageSize,
        current: 1,
        page: 0,
        size: pagination.size,
        total: pagination.total
      },
      searchCondition: { all: true }
    }, () => {
      this.getListData({ all: true });
    });
  }

  /**
   * 根据用户输入的搜索条件去筛选数据
   * @param {Object} values 筛选条件
   */
  handleSearch = (values) => {
    const { pagination } = this.state;
    values.employeeName = values.employeeName;
    values.all = false;
    this.setState({
      loading: true,
      pagination: {
        pageSize: pagination.pageSize,
        current: 1,
        page: 0,
        size: pagination.size,
        total: pagination.total
      },
      searchCondition: values
    }, () => {
      this.getListData(values);
    });
  }

  /**
 * 修改每页最大显示数据数量、页码跳转触发
 * @param {Object} pagination
 * @param {*} filters
 * @param {*} sorter
 */
  onChangePage = (pagination, filters, sorter) => {
    const { searchCondition } = this.state;
    this.setState({
      pagination: {
        pageSize: pagination.pageSize,
        current: pagination.current,
        page: pagination.current - 1,
        size: pagination.pageSize,
        total: pagination.total
      },
      loading: true
    }, () => {
      this.getListData(searchCondition);
    });
  }

  render() {
    return (
      <div className={'laborerAndDriverPage'}>
        <SearchArea
          searchForm={this.state.searchForm}
          clearHandle={this.clearHandle}
          submitHandle={this.handleSearch}
        />
        <div className="totalNum">
          {messages('common.total', { total: `${this.state.pagination.total}` })}
        </div>
        <div className="exportBtn">
          <ExportModal
            type="btn"
            exportTitle={messages('setting.key302')}
            exportType="DRIVER"
            exportCommand={'DRIVER'}
            exportCondition={{ driverDownloadCommand: this.state.searchCondition }}
          />
        </div>
        <ResizeTable
          rowKey={'id'}
          dataSource={this.state.data}
          loading={this.state.loading}
          pagination={this.state.pagination}
          onChange={this.onChangePage}
          columns={this.state.columns}
          size="middle"
          bordered
        />
      </div>
    );
  }
}

LabdrerAndDriver.contextTypes = {
  router: React.PropTypes.object
};

function mapStateToProps(state) {
  return {
    organization: state.budget.organization,
    company: state.login.company,
    language: state.main.language,
    tenantMode: state.main.tenantMode
  };
}

export default connect(mapStateToProps)(LabdrerAndDriver);
